<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>智游教育</title>

		<!-- Bootstrap -->
		<link href="/static/css/bootstrap.min.css" rel="stylesheet">

		<!--[if lt IE 9]>
      	<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    	<![endif]-->

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

		<script src="/static/js/jquery-1.12.4.min.js"></script>
		<script src="/static/js/bootstrap.min.js"></script>
		<script src="/static/js/confirm.js"></script>
		<script type="text/javascript">
		function showAddPage(){
			location.href="/behind/video/addSpeaker.jsp";
		}
		function delSpeakerById(Obj,id,name){
		alert("+++")
		 Confirm.show('温馨提示：', '确定要删除'+name+'么？', {
                'Delete': {
                    'primary': true,
                    'callback': function() {
                    	$.ajax({
                            url:"/speaker/"+id,
                            type : "DELETE",
                            success : function(data){
                                if(data.data==='success'||data.data == "success"){
                                    Confirm.show('温馨提示：', '删除成功');
                                    $(Obj).parent().parent().remove();
                                }else{
                                    Confirm.show('温馨提示：', '操作失败');
                                }
                            }
                        });
                    }
                }
            });
		}
		</script>
        <style>
            /*设置 a 标签的css样式*/
            .page-normal a{
                border: 1px solid #ff6500;
                padding: 5px 7px;
                color: #ff6500;
                margin-left: 20px;/*设置标签 a 之间的间隔*/
                text-decoration: none;/*去除页码数字下面的下划线*/
            }
            /*设置鼠标经过时 a 标签的css样式*/
            .page-normal a:hover{
                background-color: #ffbe94;
            }

            /*设置整个div的css样式,该样式主要用于设置网页内的省略号 …… 的样式，并且同时设置内容居中显示*/
            .page-normal{
                color: #ff6500;
                text-align: center;
            }

            /*设置当前页面的css样式*/
            .page-normal .page-current{
                color: #ffffff;
                background-color: #ff6500;
            }

            /*设置左单括号 < 的css样式*/
            .page-normal .page-prev{
                color: #ffe3c6;
            }

            /*进行代码优化，将不同css样式中共有的属性放在一起，有助于提高运行效率*/
            .page-normal a, .page-normal a:hover, .page-normal .page-prev, .page-normal .page-current{
                border: 1px solid #ff6500;
                padding: 5px 7px;
            }
        </style>
	</head>

	<body>
		<nav class="navbar-inverse">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          
          <a class="navbar-brand" href="videomanage.action">视频管理系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
          <ul class="nav navbar-nav">
              <li ><a href="/behind/video/listVideo.jsp">视频管理</a></li>
              <li class="active"><a href="/behind/video/speaker.jsp">主讲人管理</a></li>
              <li ><a href="/behind/video/classManage.jsp">课程管理</a></li>
            
          </ul>
          <p class="navbar-text navbar-right">
              <span>${user.email}</span>
              <i class="glyphicon glyphicon-log-in" aria-hidden="true"></i>&nbsp;&nbsp;<a href="/user/logout" class="navbar-link">退出</a></p>
        </div><!-- /.navbar-collapse -->
        
        
      </div><!-- /.container-fluid -->
    </nav>
    
    <div class="jumbotron" style="padding-top: 15px;padding-bottom: 15px;">
	  <div class="container">
	          <h2>主讲人管理</h2>
	  </div>
	</div>
	
	
	<div class="container">
	    <button onclick="showAddPage()" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		      添加
		</button>
		
	</div>
	
	<div class="container" style="margin-top: 20px;">
		
		<table class="table table-bordered table-hover" style="text-align: center;">
      <thead >
        <tr class="active">
          <th>序号</th>
          <th>名称</th>
          <th>职位</th>
          <th>简介</th>
          <th>编辑</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody id="context">


        </tbody>

      </table>
        <div class="page-normal">
            <a href="#" onclick="return page(1)">第一页</a>
            <a href="#" class="page-prev"  id="start">上一页</a>
            <!-- 数字1 代表当前页面-->

            <a href="#" id="end">下一页</a>
            <a href="#" id = "endPage">最后一页</a>

        </div>
	</div>
  </body>
    <script>
        let pageNum = 0;
        let pages = 0;

        function page(nextPageNum) {
            if(nextPageNum <= pages && nextPageNum > 0){
                $("#"+pageNum+"").removeClass("page-current");
                $("#"+nextPageNum+"").attr("class","page-current");
            }
            for(let i = 1 ; i <=pages ; i++){
                $("#"+i+"").remove();
            }
            $.ajax({
                url:"/speaker/pageInfo/"+nextPageNum,
                type:"POST",
//            contentType: "application/json",
                success: function (data) {
                    pageNum = data.data[1].pageNum;
                    pages =  data.data[1].pages;
                    $(".content").empty();
                    $.each(data.data[0], function (i, obj) {
                        $("#context").append("<tr class='content'><td>"+obj.id+"</td><td>"+obj.speakerName+"</td>" +
                            "<td>"+obj.speakerJob+"</td><td>"+obj.speakerDesc+"</td>" +
                            "<td><a href='/behind/video/updateSpeaker.jsp?id="+obj.id+"'><span class=\"glyphicon glyphicon glyphicon-edit\" aria-hidden=\"true\"></span></a></td>" +
                            "<td><a href=\"#\" onclick=\"return delSpeakerById(this,'"+obj.id+"','"+obj.speakerName+"')\"><span class=\"glyphicon glyphicon-trash\" aria-hidden=\"true\"></span></a></td><tr>");
                    });
                    for(let i = 1;i <= data.data[1].pages; i++ ){
                        if(i == data.data[1].pageNum){
                            $("#end").before("<a href=\"#\" onclick='return page("+i+")' id = \""+i+"\" class='page-current'>"+i+"</a>");
                        }else{
                            $("#end").before("<a href=\"#\" onclick='return page("+i+")' id = \""+i+"\">"+i+"</a>");
                        }
                    }
                }
            });
            return false;
        }

        $(function () {
            $.ajax({
                url: "/speaker",
                type: "post",
//            contentType: "application/json",
                success: function (data) {
                    $.each(data.data[0], function (i, obj) {
                        $("#context").append("<tr class='content'><td>"+obj.id+"</td><td>"+obj.speakerName+"</td>" +
                            "<td>"+obj.speakerJob+"</td><td>"+obj.speakerDesc+"</td>" +
                            "<td><a href='/behind/video/updateSpeaker.jsp?id="+obj.id+"'><span class=\"glyphicon glyphicon glyphicon-edit\" aria-hidden=\"true\"></span></a></td>" +
                            "<td><a href=\"#\" onclick=\"return delSpeakerById(this,'"+obj.id+"','"+obj.speakerName+"')\"><span class=\"glyphicon glyphicon-trash\" aria-hidden=\"true\"></span></a></td><tr>");

                    });
                    pageNum = data.data[1].pageNum;
                    pages =  data.data[1].pages;
                    for(let i = 1;i <= data.data[1].pages; i++ ){
                        if(i == data.data[1].pageNum){
                            $("#end").before("<a href=\"#\" onclick='return page("+i+")' id = \""+i+"\" class='page-current'>"+i+"</a>");
                        }else{
                            $("#end").before("<a href=\"#\" onclick='return page("+i+")' id = \""+i+"\">"+i+"</a>");
                        }
                    }
                },
                error: function () {
                    alert("服务器繁忙,请稍后再试!");
                }

            });
        })
        $("#start").click(function () {
            page(pageNum - 1)
        });
        $("#end").click(function () {
            page(pageNum + 1)
        });
        $("#endPage").click(function () {
            page(pages)
        });
    </script>
</html>